/* components */
import { SettingGPTViewTable } from '@src/modules/setting/gpt/components'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
import { SettingGPTQuestionTypeEnum } from '@src/modules/setting/gpt/model'
/* hooks */
import { useSettingListPage, useSettingListTable } from '@src/modules/setting/gpt/hooks'
/* model */
import Page from '@model/Page'
/* vue */
import { defineComponent, PropType, Ref, ref } from 'vue'
/* types */
import { SettingGPTLogItemType, SettingGPTQuestionItemType } from '@src/modules/setting/gpt/types'
import Column from '@model/types/Column'
/* util */
import { uuid } from 'pub-bbx-utils'

type SettingGPTViewTableComponent = InstanceType<typeof SettingGPTViewTable>;


export default defineComponent({
  name: ComponentNameEnum.SettingGPTManageViewTable,
  props: {
    columns: {
      type: Array as PropType<Column[]>,
      default: () => []
    },
    page: {
      type: Object as PropType<Page>,
      default: () => ({})
    },
    value: {
      type: Array as PropType<SettingGPTQuestionItemType[] | SettingGPTLogItemType[]>,
      default: () => []
    },
    active: {
      type: String as PropType<String>,
      default: ''
    },
    isShowDelete: {
      type: Boolean,
      default: false
    },
    showTableSelection: {
      type: Boolean,
      default: true
    },
    onChangePageSize: {
      type: Function
    },
    onChangePageNum: {
      type: Function
    },
    onAddAnswer: {
      type: Function
    },
    onDelete: {
      type: Function
    },
    onChangeSelection: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
    const { handlerPageNumChange, handlerPageSizeChange } = useSettingListPage(emit)
    
    const { handleSelectionChange, multipleSelection } = useSettingListTable(emit)
    
    return {
      onChangePageNum: handlerPageNumChange,
      onChangePageSize: handlerPageSizeChange,
      onChangeSelection: handleSelectionChange,
      multipleSelection
    }
    
  },
  data() {
    return {
      key: uuid()
    }
  },
  computed: {
    settingGPTViewTableComponent(): SettingGPTViewTableComponent {
      return this.$refs.SettingGPTViewTable as SettingGPTViewTableComponent
    }
  },
  watch: {
    active() {
      this.clearSelection()
    }
  },
  methods: {
    clearSelection() {
      this.settingGPTViewTableComponent.clearSelection()
    },
    rerender() {
      this.$nextTick(() => {
        this.key = uuid()
        this.multipleSelection = []
      })
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTManageViewTable}>
        <SettingGPTViewTable
          ref="SettingGPTViewTable"
          key={this.key}
          columns={this.columns}
          data={this.value}
          page={this.page}
          showTableSelection={this.showTableSelection}
          multipleSelection={this.multipleSelection}
          onChangePageSize={this.onChangePageSize}
          onChangePageNum={this.onChangePageNum}
          onChangeSelection={this.onChangeSelection}
        >
        </SettingGPTViewTable>
      </div>
    )
  }
})